<template>
    <div class="main">
        <top-bar
                :title="bar_title"
                :style="style" menu
                @openMenu="openMenu"
                @openLeftPanel="openLeftPanel"
                :more="shift==='/declaimer/me'">
        </top-bar>
        <div id="container"
             style="height: 84vh;">
            <router-view>
            </router-view>
        </div>
        <mu-bottom-nav style="position:fixed;bottom:0px;width:100%;height: 8vh;"
                       color="primary"
                       :value.sync="shift">
            <mu-bottom-nav-item value="/declaimer/home"
                                title="享念"
                                icon="headset"
                                to="/declaimer/home">
            </mu-bottom-nav-item>
            <mu-bottom-nav-item value="/declaimer/me"
                                title="我"
                                icon="person"
                                to="/declaimer/me">
            </mu-bottom-nav-item>
            <div class="my-badge">
                <span class="my-msg-counter"
                      v-show="my_msg_counter!=='0'">
                    {{my_msg_counter}}
                </span>
            </div>
            <mu-bottom-nav-item
                    value="/declaimer/rank"
                    title="排行榜"
                    icon="poll"
                    to="/declaimer/rank">
            </mu-bottom-nav-item>
        </mu-bottom-nav>
        <div class="float-player-mini"
             @touchstart="startTouch"
             @touchmove="moveTouch"
             @touchend="endTouch"
             v-if="backend">
            <player :music="music"
                    :mini='true'
                    ref="GlobalMinPlayer"
                    style="border-radius:12px;margin: 0px">
            </player>
            <span class="mini-text" v-text="float_text">
            </span>
        </div>
        <mu-bottom-sheet :open="open"
                         @close="closeBottomSheet">
            <mu-list @item-click="closeBottomSheet">
                <mu-sub-header>
                    选择操作
                </mu-sub-header>
                <mu-list-item button
                              v-on:click="refreshIt">
                    <mu-list-item-action>
                        <mu-icon value="refresh"
                                 color="orange">
                        </mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title>
                        更新
                    </mu-list-item-title>
                </mu-list-item>
                <mu-list-item button
                              v-on:click="aboutIt">
                    <mu-list-item-action>
                        <mu-icon value="copyright"
                                 color="black">
                        </mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title>
                        关于
                    </mu-list-item-title>
                </mu-list-item>
            </mu-list>
        </mu-bottom-sheet>
        <mu-drawer :open.sync="open_left_panel"
                   :docked="false"
                   :left="true">
            <mu-list>
                <my-expansion-panel
                        title="公告"
                        :msg_count="public_count">
                    <mu-alert color="blueGrey600"
                              v-if="public_count>0"
                              delete
                              @delete="closeLeftPanel">
                        公告测试!
                    </mu-alert>
                </my-expansion-panel>
                <my-expansion-panel
                        title="消息"
                        :msg_count="your_count">
                    <mu-alert color="blueGrey600"
                              v-if="your_count>0"
                              delete
                              @delete="closeLeftPanel">
                        你的消息!
                    </mu-alert>
                </my-expansion-panel>
                <mu-list-item @click="closeLeftPanel"
                              button>
                    <mu-list-item-title style="text-align: center">
                        关闭
                    </mu-list-item-title>
                </mu-list-item>
            </mu-list>
        </mu-drawer>
    </div>
</template>

<script>
    import TopBar from "@/components/TopBar"
    import MyExpansionPanel from "@/components/MyExpansionPanel"
    import Player from 'vue-aplayer'

    Player.disableVersionBadge = true
    export default {
        components: {
            TopBar,
            Player,
            MyExpansionPanel
        },
        name: 'declaimer',
        data() {
            return {
                my_msg_counter: this.$store.state.uiState.my_msg_counter,
                shift: '/declaimer/home',
                touch: 0,
                open_left_panel: false,
                open: false,
                your_count: "0",
                public_count: "0"
            }
        },
        created() {
        },
        computed: {
            // the float play appear state
            backend() {
                return this.$store.state.uiState.backend_player.control.show
            },
            // the float player's music
            music() {
                return this.$store.state.uiState.backend_player.music
            },
            // the float player's title
            float_text() {
                return this.$store.state.uiState.backend_player.music.title
            },
            // the float player control state
            play() {
                return this.$store.state.uiState.backend_player.control.play
            },
            // the color for the top app bar
            style() {
                return "color:white;background-color:" + this.$store.state.uiState.top_bar
            },
            // the title for the top bar
            bar_title() {
                return this.$store.state.uiState.top_tile
            },
        },
        mounted() {
            //according to the current router path switch the bottom navigation
            this.shift = this.$router.history.current.path
            this.backEndPlayer()
        },
        methods: {
            backEndPlayer() {
                if (this.$refs.GlobalMinPlayer != null
                    && this.backend) {
                    if (this.play) {
                        if (this.$store.state.uiState.backend_player.music.current_time != null) {
                            this.$refs.GlobalMinPlayer.audio.currentTime = this.$store.state.uiState.backend_player.music.current_time
                        }
                        this.$refs.GlobalMinPlayer.audio.play()
                        this.$refs.GlobalMinPlayer.audio.addEventListener("timeupdate", () => {
                            this.$store.commit('updateCurrentTime', this.$refs.GlobalMinPlayer.audio.currentTime)
                        })
                    } else {
                        this.$refs.GlobalMinPlayer.audio.pause()
                    }
                }
            },
            closeBottomSheet() {
                this.open = false
            },
            openMenu() {
                this.open = true
            },
            refreshIt() {
                this.closeBottomSheet()
                location.reload()
            },
            aboutIt() {
                this.$router.push('/declaimer/about')
            },
            startTouch() {
                this.touch = setTimeout(() => {
                    this.$store.commit('updateBackend', false)
                }, 250)
            },
            moveTouch() {
                clearTimeout(this.touch)
                this.touch = 0
            },
            endTouch() {
                clearTimeout(this.touch)
                if (this.touch > 0) {
                    this.backEndPlayer()
                }
                this.touch = 0
            },
            openLeftPanel() {
                this.open_left_panel = true
            },
            closeLeftPanel() {
                this.open_left_panel = false
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .my-badge
        white-space nowrap
        display inline-block

    .my-msg-counter
        background-color: rgb(244, 67, 54)
        display block
        height 3vh
        width 3vh
        color white
        position: relative;

        top -3vh
        left -200%
        font-size 12px
        border-radius 4px

    .mu-infinite-scroll
        position relative
        bottom 8vh

    .mu-refresh-control
        top: 8vh

    .float-player-mini
        position fixed
        top 10%
        right 20px
        text-align center justify-content
        overflow hidden

    .mini-text
        position absolute
        font-size 11px
        font-weight bold
        top 35%
        left 9px

        white-space nowrap
        display inline-block
        animation 10s wordLoop linear infinite normal
        color white

    @keyframes wordLoop
        0%
            transform translateX(20px)
            -webkit-transform translateX(20px)
        100%
            transform translateX(-100%)
            -webkit-transform translateX(-100%)

    @-webkit-keyframes wordLoop
        0%
            transform translateX(20px)
            -webkit-transform translateX(20px)
        100%
            transform translateX(-100%)
            -webkit-transform translateX(-100%)
</style>
